<template>
	<view class="content">
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">

					<u-form-item label="条码" prop="userInfo.barcode" borderBottom ref="item1">
						<u-input v-model="model1.userInfo.barcode" border="none" placeholder="请扫码">
							<template slot="suffix">
								<u-icon name="scan" size="24" @click="scanBarcode()"></u-icon>
							</template>
						</u-input>
					</u-form-item>

					<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
						<u--input v-model="model1.userInfo.name" border="none" placeholder="请填写姓名"></u--input>
					</u-form-item>

					<u-form-item label="性别" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
						ref="item1">
						<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>

					<u-form-item label="生日" prop="userInfo.birthday" borderBottom
						@click="showBirthday = true; hideKeyboard()" ref="item1">
						<u--input v-model="model1.userInfo.birthday" disabled disabledColor="#ffffff"
							placeholder="请选择生日" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>

					<u-form-item label="手机号" prop="userInfo.phone" borderBottom ref="item1">
						<u--input v-model="model1.userInfo.phone" border="none" placeholder="请填写手机号"></u--input>
					</u-form-item>

					<u-form-item label="结果" prop="userInfo.result" borderBottom ref="item1">
						<u--textarea placeholder="请填写结果" v-model="model1.userInfo.result" count maxlength=500
							style="width: 70%;"></u--textarea>
					</u-form-item>

				</u--form>

				<checkbox-group @change="checkboxChange" style="transform:scale(0.8);margin-top:20px;">
					<checkbox value="cb" :checked="checked" />
					我已阅读并同意<text style="color: #007AFF;" @click="jumpToPolicy()">《用户隐私协议》</text>
				</checkbox-group>

				<u-button type="primary" text="提交" customStyle="margin-top: 20px" @click="$u.throttle(submit, 1000)">
				</u-button>

				<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false"
					@select="sexSelect">
				</u-action-sheet>

				<u-datetime-picker :show="showBirthday" :value="birthday" mode="date" closeOnClickOverlay
					@confirm="birthdayConfirm" @cancel="birthdayClose" @close="birthdayClose"></u-datetime-picker>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cb: false,
				checked: false,
				tips: '',
				value: '',
				showCalendar: false,
				showBirthday: false,
				model1: {
					userInfo: {
						name: '',
						sex: '',
						birthday: '',
						phone: '',
						result: '',
						barcode: ''
					},
				},
				showSex: false,
				birthday: Number(new Date()),
				actions: [{
						name: '男',
					},
					{
						name: '女',
					}
				],
				rules: {
					'userInfo.barcode': {
						type: 'string',
						required: true,
						message: '请扫码',
						trigger: ['blur', 'change']
					},
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
					'userInfo.birthday': {
						type: 'string',
						required: true,
						message: '请选择生日',
						trigger: ['blur', 'change']
					},
					'userInfo.phone': [{
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					}],
					'userInfo.result': {
						type: 'string',
						required: true,
						message: '请填写结果',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad() {

		},
		methods: {
			jumpToPolicy() {
				console.log(123);
				uni.redirectTo({
				    url: '/pages/index/policy'
				});
			},
			checkboxChange() {
				this.cb = !this.cb
				this.checked = !this.checked
			},
			navigateBack() {
				uni.navigateBack()
			},
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
			change(e) {
				// console.log(e);
			},
			formatter(day) {
				const d = new Date()
				let month = d.getMonth() + 1
				const date = d.getDate()
				if (day.month == month && day.day == date + 3) {
					day.bottomInfo = '有优惠'
					day.dot = true
				}
				return day
			},
			calendarConfirm(e) {
				this.showCalendar = false
				this.model1.hotel = `${e[0]} / ${e[e.length - 1]}`
				this.$refs.form1.validateField('hotel')
			},
			codeChange(text) {
				this.tips = text;
			},
			calendarClose() {
				this.showCalendar = false
				this.$refs.form1.validateField('hotel')
			},
			birthdayClose() {
				this.showBirthday = false
				this.$refs.form1.validateField('userInfo.birthday')
			},
			birthdayConfirm(e) {
				this.showBirthday = false
				this.model1.userInfo.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.$refs.form1.validateField('userInfo.birthday')
			},
			submit() {
				let that = this;

				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					// 校验手机号格式
					if (!uni.$u.test.mobile(that.model1.userInfo.phone)) {
						uni.$u.toast('手机号格式错误')
						return false;
					}

					// 阅读并同意用户隐私协议
					if (!that.cb) {
						uni.$u.toast('请阅读并同意《用户隐私协议》')
						return false;
					}

					that.checked = true;

					uniCloud.callFunction({
						name: 'submit',
						data: that.model1
					}).then(res => {
						console.log("res：", res)
						if (res.result.code === '00') {
							uni.$u.toast(res.result.success_msg)

							// 清空表单
							that.model1 = {
								userInfo: {
									name: '',
									sex: '',
									birthday: '',
									phone: '',
									result: '',
									barcode: ''
								},
							}
							that.birthday = Number(new Date());
							that.checked = false
							that.cb = false

							this.$refs.form1.resetFields();
						} else {
							uni.$u.toast(res.result.err_msg)
						}
					})
				}).catch(errors => {
					console.log(errors)
					uni.$u.toast('校验失败')
				})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			scanBarcode() {
				let that = this;

				// 调起条码扫描  
				uni.scanCode({
					scanType: ['barCode'],
					success: function(res) {
						that.model1.userInfo.barcode = res.result;
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			}
		},
	}
</script>

<style lang="scss">
	.content {
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: center;
		margin-left: 2rem;
		margin-right: 2rem;

		textarea {
			width: 70% !important;
		}

		.privacyPolicy {}
	}
</style>
